<!DOCTYPE html>
<html lang="en">
{% include head.html %}

<body id="blog">
  <div class="container-fluid site-outer-container">
    <div class="site-container">
      {% include site-header.html %}
      <div class="post-single-hero bg-color-{{ site.hero.background-color }}"> 
        <div class="section">
          <div class="section-content">
            <h1>{{ page.title }}</h1>
          </div>
        </div>
      </div>
      <div class="post-single-body">
        <div class="section section-card">
          <div class="section-content pt-4 pb-0">
            <div class="post-single-meta">
              <div class="post-single-meta-author">
                {% if page.author_avatar %}
                <div class="post-single-meta-author-avatar">
                  <img src="{{ page.author_avatar }}" alt="{{ page.author_name }}">
                </div>
                {% endif %}

                <div class="post-single-meta-author-name">
                    {% if page.author_url %}
                    <a href="{{ page.author_url }}">{{ page.author_name }}</a>
                    {% else %}
                    <a href="/tags/{{ page.author_name | urlencode }}">{{ page.author_name }}</a>
                    {% endif %}
                </div>
              </div>

              <div class="post-single-meta-date">
                {{ page.date | date: "%B %d, %Y" }}
              </div>
            </div>
          
            <div class="post-single-content">
              {{ content }}
            </div>
          </div>
        </div>
      </div>

      <div class="section pt-3">
        <div class="section-content section-content-thin">
          {% include related-posts.html %}
        </div>
      </div>

      {% include footer.html %}
    </div>
  </div>
</body>

</html>